<!--
  会议室预约-日期选择
  event：
    change 选中变化 params：{ date: object, time: string },date选中日期的日期对象，time选中日期的日期文本
-->
<template>
  <f7-block class="date-picker-box">
    <f7-block class="date-picker-step">
      <van-tabs v-model="activeDate" line-width="0px" line-height="0px" @click="handleCLick">
        <van-tab v-for="date in displayDateList" :key="date.i" :name="date.i">
          <template #title>
            <div class="step-title">
              <span class="day">{{date.day}}</span>
              <span class="date">{{date.date}}</span>
            </div>
          </template>
        </van-tab>
      </van-tabs>
    </f7-block>
    <f7-block class="date-picker">
      <div class="img-box" @click="openDatePicker">
        <img src="static/img/list/icon_rili.png" alt="icon_rili" class="icon-rili">
        <img src="static/img/list/triangle.png" alt="triangle" class="triangle">
      </div>
    </f7-block>
    <van-calendar
      :get-container="getContainer"
      :max-date="maxDate"
      :default-date="defaultDate"
      v-model="show"
      @confirm="onConfirm"
    />
  </f7-block>
</template>

<script>
import { Tabs, Tab, Calendar } from "vant"

const dayText =["日", "一", "二", "三", "四", "五", "六"];
let dateObj = null;
let nowTimestamp = new Date(new Date().toLocaleDateString()).valueOf();

export default {
  name: "qm-date-appointment",
  components: {
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [Calendar.name]: Calendar
  },
  data() {
    return {
      activeDate: 0,
      show: false,
      dateList: [], // 日期列表，用于存储全部日期数据。
      offset: 0, // 偏移量，当选中日期大于今天+(quantity/2)
      quantity: 7, // 显示日期的数量
      maxDay: 30, // 以今天为起点的可选最大天数
      defaultDate: new Date()
    }
  },
  computed: {
    // 用于渲染日期步骤条的数据
    displayDateList() {
      let displayDateList = this.dateList.slice(this.offset, this.quantity + this.offset);
      return displayDateList;
    },
    // 分界线，分界线为显示日期中间项的下标
    dividingLine() {
      return Math.floor(this.quantity / 2);
    },
    maxDate() {
      let date = new Date();
      date.setDate(date.getDate() + this.maxDay);
      return date;
    }
  },
  watch: {
    // 监听偏移量的变化
    offset(newVal, oldVal) {
      if (newVal <= oldVal) return;
      let dateList = [];
      let day, month, year;
      let quantity = this.quantity;
      for (let i = oldVal; i < newVal; i++) {
        if (this.dateList[quantity + i]) continue;
        day = dateObj.getDate();
        month = dateObj.getMonth() + 1;
        year = dateObj.getFullYear();
        dateList.push({
          day: `周${dayText[dateObj.getDay()]}`,
          date: `${month}-${day}`,
          time: `${year}-${month}-${day}`,
          i: i + quantity
        })
        dateObj.setDate(dateObj.getDate() + 1);
      }
      this.dateList.push(...dateList);
    },
    activeDate(newVal) {
      let { time } = this.dateList[newVal];
      this.$emit("change", {
        date: new Date(time),
        time
      });
    }
  },
  methods: {
    // 打开日历
    openDatePicker() {
      this.show = true;
    },
    // 日历选中回调
    onConfirm(date) {
      let timeStamp = new Date(date.toLocaleDateString()).valueOf();
      let days = (timeStamp - nowTimestamp) / (24 * 60 * 60 * 1000);
      let offset = days - this.dividingLine;
      // 偏移量大于可显示的最大日期
      if (offset > (this.maxDay - this.dividingLine * 2)) {
        offset = this.maxDay - this.dividingLine * 2;
      }
      this.offset = offset > 0 ? offset : 0;
      setTimeout(() => {
        this.activeDate = days;
      })
      this.show = false;
    },
    // 将日历弹出层挂载到对应节点上，保证不被内容覆盖
    getContainer() {
      return document.querySelector(".framework7-root > .view")
    },
    // 点击标签
    /**
     * @param(i) 激活项在dateList中的下标
     */
    handleCLick(i) {
      let offset = i - this.dividingLine;
      // 偏移量大于可显示的最大日期
      if (offset > (this.maxDay - this.dividingLine * 2)) {
        offset = this.maxDay - this.dividingLine * 2;
      }
      this.offset = offset > 0 ? offset : 0;
      this.defaultDate = new Date(this.dateList[i].time);
    }
  },
  created() {
    // 创建以当前日期为起点的对应数量的显示日期数据
    dateObj = new Date();
    let dateList = [];
    let day, month, year;
    let timeDes = ["今天", "明天", "后天"];
    for (let i = 0, len = this.quantity; i < len; i++) {
      day = dateObj.getDate();
      month = dateObj.getMonth() + 1;
      year = dateObj.getFullYear();
      dateList.push({
        day: timeDes[i] ? timeDes[i] : `周${dayText[dateObj.getDay()]}`,
        date: `${month}-${day}`,
        time: `${year}-${month}-${day}`,
        i
      });
      dateObj.setDate(dateObj.getDate() + 1);
    }
    this.dateList = dateList;
  }
}
</script>

<style lang="less" scoped>
  /deep/ .van-calendar__selected-day{
  background-color: #3385ff;
}
/deep/ .van-button--danger{
  background-color: #3385ff;
  border: 1px solid #3385ff;
}
.date-picker-box {
  display: flex;
  margin: 0;
  padding: 0;
  height: calc(98px * var(--ratio));
  .date-picker-step {
    margin: 0;
    padding: 0;
    flex-grow: 1;
    flex-shrink: 1;
    overflow: hidden;

    ::v-deep .van-tabs--line {
      .van-tabs__wrap {
        height: calc(98px * var(--ratio));;
      }
    }

    ::v-deep .van-tabs__nav--line {
      background-color: transparent;
      padding-bottom: 0;

      &.van-tabs__nav--complete {
        padding: 0;
      }

      .van-tab {
        margin: 0 calc(12px * var(--ratio)) 0 0;
        padding: calc(5px * var(--ratio)) 0 calc(7px * var(--ratio));
        width: calc(100px * var(--ratio));
        height: calc(96px * var(--ratio));
        border-radius: calc(16px * var(--ratio));
        // background-color: #fff;
      }

      .van-tab--active {
        background-color: #fff;

        .step-title {
          .day, .date {
            color: var(--color-brand);
          }
        }
      }
    }

    .step-title {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;

      .day {
        font-size: var(--font-size-subcontent-2);
        // color: var(--color-brand);
        color: #fff;
      }
      .date {
        font-size: var(--font-size-subcontent);
        // color: var(--color-brand);
        color: #fff;
      }
    }
  }
  .date-picker {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    flex: 0 0 calc(112px * var(--ratio));
    background-image: url(../../../../static/img/list/date-bg.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    .img-box {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    .icon-rili {
      margin-bottom: calc(12px * var(--ratio));
      width: calc(32px * var(--ratio));
      height: calc(33px * var(--ratio));
    }
    .triangle {
      width: calc(12px * var(--ratio));
      height: calc(9px * var(--ratio));
    }
  }
}
</style>
